<template>
    <HeaderTitle title="欢迎来到约起联盟！"
                 style="width: 8rem; margin: 1.8rem auto 0.8rem;font-size: 0.8rem;"></HeaderTitle>
    <div class="carousel-box">
        <n-carousel effect="card" dot-type="line" autoplay interval="3000" draggable>
            <n-carousel-item :style="{ width: '75%' }">
                <img class="carousel-img" src="@/assets/images/carousel/jy1.jpg"
                     alt="轮播">
            </n-carousel-item>
            <n-carousel-item :style="{ width: '75%' }">
                <img class="carousel-img" src="@/assets/images/carousel/jy2.jpg"
                     alt="轮播">
            </n-carousel-item>
            <n-carousel-item :style="{ width: '75%' }">
                <img class="carousel-img" src="@/assets/images/carousel/jy3.jpg"
                     alt="轮播">
            </n-carousel-item>
            <n-carousel-item :style="{ width: '75%' }">
                <img class="carousel-img" src="@/assets/images/carousel/jy4.jpg"
                     alt="轮播">
            </n-carousel-item>
            <n-carousel-item :style="{ width: '75%' }">
                <img class="carousel-img" src="@/assets/images/carousel/jy5.jpg"
                     alt="轮播">
            </n-carousel-item>
        </n-carousel>
    </div>
    <div class="introduce-box">
        <HeaderTitle title="平台介绍" style="width: 3.5rem;"></HeaderTitle>
        <p class="text">
            欢迎来到我们的校园交友平台！我们是一家专注于为大学生提供优质交友服务的平台。我们的平台致力于为用户打造一个安全、可靠、愉悦的交友环境，让每一位用户都能够轻松结识志同道合的朋友，拓展自己的社交圈。
        </p>
        <p class="text">
            我们的平台拥有丰富的交友功能，包括个人信息展示、兴趣爱好匹配、在线聊天、约会组织等，让用户能够更便捷地发现自己的兴趣爱好相同的人，进行更深入的交流和了解。同时，我们还提供了强大的安全保障机制，保证每一位用户的个人隐私和信息安全。
        </p>
        <p class="text">
            在我们的平台上，您可以轻松地找到志同道合的朋友，分享自己的生活和经历，也可以发现更广阔的人生机遇和可能性。我们相信，每一次交友都是一次宝贵的经历，我们希望能够为您提供最优质的交友服务和体验，让您的大学生活更加精彩！
        </p>
    </div>
    <RecordRecommend></RecordRecommend>
    <QuizRecommend></QuizRecommend>
</template>

<script setup lang="ts">
import useStore from "@/store";
import RecordRecommend from "@/views/home/RecordRecommend.vue";
import QuizRecommend from "@/views/home/QuizRecommend.vue";
import PageHandler from "@/components/PageHandler/PageHandler.vue";

const {app, web} = useStore();

onActivated(() => {
    app.setBackgroundImg(app.backgroundImgList[0])
})
</script>

<style scoped>

.carousel-box {
    width: 90%;
    height: 10rem;
    margin: 0 auto;

    .carousel-img {
        width: 100%;
        height: 92%;
        background-size: cover;
    }
}

.introduce-box {
    padding: 0.6rem;

    .text {
        font-size: 0.6rem;
        background: var(--footer-bg);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
        width: 100%;
        background-size: 300% 300%;
        -webkit-animation: gradientBG 10s ease infinite;
        animation: gradientBG 10s ease infinite;
    }
}

@media (min-width: 80rem) {
    .carousel-box {
        height: 14rem;
    }
}

@media (min-width: 120rem) {
    .carousel-box {
        height: 18rem;
    }
}

@media (max-width: 40rem) {
    .carousel-box {
        height: 5rem;
    }
}
</style>